// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
import { parseTime } from '@/utils/index'
import { whiteList } from '@/api/galaxy/promote'
var dataList: any[]
var tarValue: number
export default class EchartsConfig {
  private myChart: any
  private option = {
    title: {
      text: '金额分布图',
      textStyle: {
        color: '#6CE1FB',
        fontSize: 14
      },
      x: 'center',
      y: '28%'
    },
    color: ['#F4D761', '#3973F6', '#7844D7', '#DF6C7D', '#34A6D2', '#eb3a53'],
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'center',
      bottom: '5%',
      data: '',
      padding: [0, 10, 10, 0],
      selectedMode: false,
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      textStyle: {
        fontSize: 13,
        width: 160,
        color: [
          '#F4D761',
          '#3973F6',
          '#7844D7',
          '#DF6C7D',
          '#34A6D2',
          '#eb3a53'
        ],
        rich: {
          a: {
            align: 'left',
            color: '#77899c',
            padding: [0, 0, 0, 10]
          },
          b: {
            align: 'right',
            color: '#eb3a53'
          },
          c: {
            align: 'right',
            color: '#4ed139'
          }
        }
      },
      formatter: function(name: string) {
        var data = dataList
        var total = 0
        for (var i = 0, l = data.length; i < l; i++) {
          total += data[i].value
          if (data[i].name === name) {
            tarValue = data[i].value
          }
        }
        var p = ((tarValue / total) * 100).toFixed(2)
        return name + ' ' + ' ' + '(' + (p === 'NaN' ? '0.00' : p) + '%)'
      }
    },
    series: [
      {
        name: '金额分布占比',
        type: 'pie',
        radius: ['30%', '45%'],
        center: ['50%', '30%'],
        data: '',
        label: {
          show: false,
          position: 'center',
          formatter: function() {
            return '金额分布图'
          }
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: '#ffffff',
          legendHoverLink: false
        }
      }
    ]
  }

  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }

  public setOption(series: any, legend: any) {
    this.option.series[0].data = series
    this.option.legend.data = legend
    dataList = series
    this.myChart && this.myChart.setOption(this.option)
    var _this = this
    window.addEventListener('resize', function() {
      _this.myChart.resize()
    })
  }
}
